<template>
  <div class="box">
    <el-tabs>
      <el-tab-pane class="font">
        <el-tooltip class="item-tabs" effect="light" placement="top" slot="label">
          <div slot="content">
            <span>仅展示“投标截止时间”在当前时间之后，且在“公示时间”之后的招标公告</span>
          </div>
          <span style="border-left: solid 5px;border-color: #0065b5 !important;padding-left: 7px">最新招标公示</span>
        </el-tooltip>
        <!--招标公示-->
        <el-table :data="tenderList" stripe style="width: 100%" :default-sort = "{prop: 'uUpdateTime', order: 'descending'}">
          <el-table-column align="center" type="index" label="编号" width="180"></el-table-column>
          <el-table-column align="center" prop="uTitle" label="公告标题" width="500"></el-table-column>
          <el-table-column align="center" label="剩余天数">
            <template slot-scope="scope">
              <!-- 使用计算属性来计算剩余天数 -->
              <span style="color: red;font-size: 16px;font-weight: bold;">{{
                  calculateRemainingDays(scope.row.uEndTime)
                }}</span>天
            </template>
          </el-table-column>
          <el-table-column align="center" prop="fjStatus" label="操作" width="250">
            <template slot-scope="scope">
              <el-button size="small" type="primary" style="margin-left: 20px;background-color: yellowgreen;border-color: yellowgreen;" @click="tenderDetail(scope.row)">
                <el-link type="primary" style="color: white">我要投标</el-link>
              </el-button>
              <el-tag style="padding: 0 0;margin-left: 10px;" v-if="calculateBidding(scope.row.uKaiTime,scope.row.uKaiEndTime) === -1">
                <el-button size="small" type="primary" style="background-color: #9d9d9d;border-color: #9d9d9d;" :disabled="true">
                  <el-link type="primary" style="color: white" :disabled="true">竞标未开始</el-link>
                </el-button>
              </el-tag>
              <el-tag style="padding: 0 0;margin-left: 10px;" v-if="calculateBidding(scope.row.uKaiTime,scope.row.uKaiEndTime) === 0">
                <el-button size="small" type="primary" style="background-color: #9d9d9d;border-color: #9d9d9d;" :disabled="true">
                  <el-link type="primary" style="color: white" :disabled="true">竞标已经结束</el-link>
                </el-button>
              </el-tag>
              <el-tag style="padding: 0 0;margin-left: 10px;" v-if="calculateBidding(scope.row.uKaiTime,scope.row.uKaiEndTime) === 1">
                <el-button size="small" type="primary" style="background-color: red;border-color: red;" @click="toGoBidding(scope.row)">
                  <el-link type="primary" style="color: white">去竞价</el-link>
                </el-button>
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="uEndTime" label="投标截止时间" sortable width="180"></el-table-column>
          <el-table-column align="center" prop="uUpdateTime" label="公示时间" sortable width="180"></el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane class="font">
        <el-tooltip class="item-tabs" effect="light" placement="top" slot="label">
          <div slot="content">
            <span>仅展示已经发布招标公告，且已经定标的招标项目</span>
          </div>
          <span>中标结果</span>
        </el-tooltip>
        <!--中标结果-->
        <el-table
            :data="tableData"
            stripe
            style="width: 100%">
          <el-table-column
              align="center"
              type="index"
              label="编号"
              width="180">
          </el-table-column>
          <el-table-column
              align="center"
              prop="uTitle"
              label="项目名称"
              width="500">
            <template slot-scope="scope">
              <span>{{scope.row.bidTender.sName || '——'}}</span>
            </template>
          </el-table-column>
          <el-table-column
              align="center"
              prop="fjStatus"
              label="招标单位">
            <template slot-scope="scope">
              <span>{{scope.row.bidTender.sUnit || '——'}}</span>
            </template>
          </el-table-column>
          <el-table-column
              align="center"
              prop="fjStatus"
              label="操作"
              width="250">
            <template slot-scope="scope">
              <el-button size="small" type="primary" style="margin-left: 20px;background-color: #0065B5;border-color: #0065B5;" @click="viewTenderDetail(scope.row)">
                <el-link type="primary" style="color: white">查看详情</el-link>
              </el-button>
            </template>
          </el-table-column>
          <el-table-column
              align="center"
              sortable
              label="结束时间">
            <template slot-scope="scope">
              <span>{{scope.row.bidTender.updateTime || '——'}}</span>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import {getList, findAllByEndTime, getSubmissionInfo} from '@/api/home'
import modal from "@/plugins/modal";

export default {
  name: 'BiddingList',
  data() {
    return {
      tenderList: [],
      total: 0,
      tableData: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        orderNum: null,
        uid: null,
        sid: null,
        uTitle: null,
        uProject: null,
        uMoney: null,
        uGetTime: null,
        uAcceptTime: null,
        uEndTime: null,
        uKaiTime: null,
        fjAnnex: null,
        fjStatus: null,
        fjRemark: null,
        uUpdateTime: null,
      },
    }
  },
  created() {
    this.Info();
  },
  methods: {
    //查询招标公示
    Info() {
      this.queryParams.fjStatus = 5;//已发布状态
      this.queryParams.uEndTime = '2020-11-11';//只要非空即可
      if (sessionStorage.getItem("token") == null) {
        console.log('tttttttttttttttttttttttttttttttttttttttttttttt')
        //没有登录，不知道hid，所以只显示公开招标的公告
        this.queryParams.sWay = 1;
        this.queryParams.hid = null;
      }else{
        //登录了，拿到hid,获取所有的
        this.queryParams.sWay = null;
        this.queryParams.hid = JSON.parse(sessionStorage.getItem("bsSupplier")).hid;
      }
      getList(this.queryParams).then(res => {
        this.tenderList = res.data.rows;
        console.log(this.tenderList,"this.tenderList");
        this.total = res.data.total;
      })
      //终止
      findAllByEndTime().then(res => {
        this.tableData = res.data.data;
      })
    },
    tenderDetail(row) {
      if (sessionStorage.getItem("token") == null) {
        modal.alertWarning("注册供应商登录后投标")
      } else {
        this.$router.push('/detail?uid='+row.uid+ '&sid=' + row.sid +'&type=bidNotice&read=0');
      }
    },
    viewTenderDetail(row) {
      if (sessionStorage.getItem("token") == null) {
        modal.alertWarning("注册供应商并登录后查看")
      } else {
        this.$router.push('/detail?uid='+row.uid+'&type=winning&sid='+row.bidTender.sid);
      }
    },
    toGoBidding(row) {
      if (sessionStorage.getItem("token") == null) {
        modal.alertWarning("注册供应商并登录后再竞价")
      } else {
        let hid = JSON.parse(sessionStorage.getItem('bsSupplier')).hid;
        console.log(hid)
        getSubmissionInfo(row.sid,hid).then(res => {
          if(res.data.code === 200){
            this.$router.push('/goBidding?uid='+ row.uid+'&sid='+ row.sid + '&xyId=' + row.xyId +'&type=bidNotice&read=1');
          }else{
            modal.alertWarning("未投标不能竞价")
          }
        })
      }
    },
    calculateRemainingDays(uEndTime) {
      // 将字符串转换为日期对象
      const updateTime = new Date(uEndTime);
      // 计算当前日期与公示时间的差值，并返回剩余天数
      return Math.ceil(Math.abs(Date.now() - updateTime) / (1000 * 60 * 60 * 24));
    },
    calculateBidding(uKaiTime,uKaiEndTime) {
      // 将字符串转换为日期对象
      const tempUKaiTime = new Date(uKaiTime);
      const tempUKaiEndTime = new Date(uKaiEndTime);
      if(Date.now() >= tempUKaiTime && Date.now() < tempUKaiEndTime){
        return 1
      }else if(Date.now() < tempUKaiTime){
        return -1;
      }else{
        return 0;
      }
    },
  }
}
</script>
<style>
.font {
  font-size: 16px;
}

.tenderInfo {
  font-size: 14px;
}
</style>
